<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="stylesheet" href="/layui/css/layui.css?x2x3355446454325444">
    <body >
    <style type="text/css">
        .toolbar {
            border: 1px #ccc;
            width: 655px;
        }
        .text {
            border: 0px solid #ccc;
            min-height:660px;
            width: 655px;
            font-size: 16px;
        }

        .w-e-text {
            padding: 0 10px;
            overflow-y: hidden;
        }

        textarea {
            -webkit-appearance: textarea;
            background-color: white;
            -webkit-rtl-ordering: logical;
            flex-direction: column;
            resize: none;
            cursor: text;
            white-space: pre-wrap;
            word-wrap: break-word;
            border-width: 1px;
            border-image: initial;
            padding: 2px;
            -webkit-writing-mode: horizontal-tb !important;
            text-rendering: auto;
            color: initial;
            letter-spacing: normal;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            display: inline-block;
            text-align: start;
            margin: 0em;
            font: 400 11px system-ui;
        }

        .Input {
            height: 44px;
            min-height: 44px;
            display: block;
            width: 800px;
            border: 0;
            font-size: 32px;
            line-height: 1.4;
            font-weight: 600;
            font-synthesis: style;
            outline: none;
            box-shadow: none;
        }

        textarea.Input {
            color: #1a1a1a;
        }

        /* ul ol 样式 */
        ul, ol {
            margin: 10px 0 10px 20px;
        }
        ol {
            display: block;
            list-style-type: decimal;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 40px;
        }
    </style>

        <div style="margin: 30px 350px;">

            <div style="margin: 20px auto">
                <textarea rows="1" class="Input" placeholder="请输入标题" style="height: 44px;" maxlength="50"></textarea>
            </div>


            <div id="div1" class="toolbar">
            </div>

            <div style="padding: 5px 0; color: #ccc"></div>
            <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
                <p>请输入内容</p>
            </div>

            <button id="btn1">获取html11</button>
            <button id="btn2">获取text</button>

        </div>`


        <script type="text/javascript" src="/editor/js/wangEditor.js"></script>
        <script type="text/javascript">
            var E = window.wangEditor
            var editor = new E('#div1','#div2');
            editor.customConfig.pasteIgnoreImg = false;
            editor.customConfig.uploadImgShowBase64 = true;
        //    editor.customConfig.pasteTextHandle = function (content) {
        //        return content + '<p>在粘贴内容后面追加一行</p>'
        //    }

            editor.customConfig.uploadImgServer = '/upload';
            editor.customConfig.uploadFileName = 'file';

            editor.customConfig.menus = [
                'bold',  // 粗体
                'fontSize',  // 字号
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'code',  // 插入代码
                'link',  // 插入链接
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'video',  // 插入视频
                'undo'  // 撤销

            ]


            editor.customConfig.onfocus = function () {
                if (editor.txt.text() == '请输入内容') {
                    editor.txt.clear();
                }
            }

            editor.customConfig.onblur = function (html) {
                if (editor.txt.html() == '<p><br></p>') {
                    editor.txt.html('<p>请输入内容</p>');
                }
            }


            editor.create();

            document.getElementById('btn1').addEventListener('click', function () {

                if (window.localStorage) {
                    alert("OK");
                }

                var context = editor.txt.html();
               localStorage.setItem("myKey", context);

                // 读取 html
                alert(localStorage.getItem("myKey"));

            }, false)

            document.getElementById('btn2').addEventListener('click', function () {
                // 读取 text
                alert(editor.txt.text())
            }, false)

        </script>
    </body>
</html>